<template>
  <div class="newFile">
    <div class="header">
      <div class="ldtine"><h2><span class="fr">责任人：{{boardDetail.respMan}}</span></h2>
        <div  style="color:#d9d9d9; font-size:22px">{{date}}</div>
      </div>
      <div class="lfvq"><h1 class="logo"><a href=""></a></h1></div>

      <p><img src="../../../assets/images/logo.png" style="width:200px;" /> {{boardDetail.name}}</p>
    </div>
    <div class="bg" ></div>
    <div id="container" >

      <div class="cont">
        <div class="cont_tit">
          <table width="100%" border="0" cellspacing="0" cellpadding="0" class="bgys1">
            <tr>
              <td width="90"  bgcolor="#1e6e85"  v-show="tableHeaderMap['name']!=-1">库位</td>
              <td width="175"  bgcolor="#1e6e85"  v-show="tableHeaderMap['gzCode']!=-1"><div align="center">工装编号</div></td>
              <td width="181"  bgcolor="#1e6e85" v-show="tableHeaderMap['productName']!=-1"><div align="center">车型</div></td>
              <td  width="445" bgcolor="#1e6e85" v-show="tableHeaderMap['useStatusCn']!=-1" ><div align="center">库态</div></td>
              <td width="181"  bgcolor="#1e6e85" v-show="tableHeaderMap['gzStatusCn']!=-1" ><div align="center">状态</div></td>
            </tr>

          </table>
          <div class="cnt_nr">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="bgys2">
              <tr bgcolor="#e7f4f4" v-for="(item ,index) in tableData" :key="index" v-if="(displayNoData ||item.gzStatus)&&(item.gzStatus == '0'||item.gzStatus == '1'||item.gzStatus == '2'||item.gzStatus == '3'||item.gzStatus == '4'||item.gzStatus == '5'||(item.gzStatus =='8'&&item.useStatus=='1'))">
                <td width="90"  v-show="tableHeaderMap['name']!=-1"><div align="center">{{item.name}}</div></td>
                <td width="175" v-show="tableHeaderMap['gzCode']!=-1"><div align="center">{{item.gzCode}}</div></td>
                <td width="181" v-show="tableHeaderMap['productName']!=-1"><div align="center">{{item.carType}}</div></td>
                <td width="445" :bgcolor="getUseStatusColor(item.useStatus,item.gzStatus)" v-show="tableHeaderMap['useStatus']!=-1"><div align="center" :class="['STYLE1',(item.useStatus==1 && item.gzStatus==5)?'bg-white':'']" >{{item.useStatusCn}}</div></td>
                <td width="181" :bgcolor="getGzStatusColor(item.gzStatus)" v-show="tableHeaderMap['gzStatus']!=-1"><div align="center"  :class="item.gzStatus==5?'bg-white':''">{{item.gzStatusCn}}</div></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>安徽江淮松芝空调有限公司</p>
      <!--<p>南京博士朗新能源科技有限公司</p>-->
    </div>
    <div class="floating-button" @click="stopOrResume"  v-show="!noAutoScroll">{{stop?'停止':'滚动'}}</div>
  </div>

</template>
<script>
  import whTable from "../../../components/wh-table/index";
  import { formatDate } from '@/utils/formatDate'
  import nxFullScreen from '@/components/nx-full-screen/index'
  export default {
    name:'lookboard',
    components: {whTable,nxFullScreen},
    data(){
      return{
        tableData: [],
        tableHeader:[],
        tableHeaderMap:{name:"0",gzCode:"0",productName:"0",useStatusCn:"0",gzStatusCn:"0"},
        tableLoading:true,
        headerFix:false,
        option:{showOperate:false, headerCell: {background: 'rgb(214, 215, 216)', color: 'rgba(0, 0, 0, 0.8)'}},

        code:"",
        timer:null,
        date:"",
        boardDetail:{respMan:"",name:""},
        noAutoScroll:false,
        boardTimer:null,
        stop:true,

        displayNoData:true
      }
    },

    mounted(){
      let self = this;
      self.noAutoScroll = this.$route.query.noAutoScroll;
      if(!self.noAutoScroll){
        self.autoScroll();
        self.headerFix = true;
      }
      self.code = this.$route.query.code;
      if(self.code){
        self.getKuweiList();
      }
      self.timer = setInterval(() => {
        self.date = formatDate(new Date(),"yyyy-MM-dd hh:mm:ss"); // 修改数据date
      }, 1000);

      self.boardTimer = setInterval(() => {
        self.getKuweiList(true);
        self.setDisplayHeader();
        self.setDisplayNoData();
      }, 5000);
    },

    methods:{
      getUseStatusColor(userStatus,gzStatus){
        let background = "";
        if(userStatus == 0){
          background = "#1ef31e";
        }
        if(userStatus == 1){
          background = "#F20000";
        }
        if(userStatus == 1&&gzStatus== 5){
          background = "#F20000";
        }
        if(userStatus == 1&&gzStatus== 2){
          background = "#FFE710";
        }
        if(userStatus == 1&&(gzStatus== 0||gzStatus==1||gzStatus==3)){
          background = "#5AACFF";
        }
        if(!userStatus){
          background = "#c1bfbf";
        }
        return background;
      },

      getGzStatusColor(gzStatus){
        let background = "";
        if(gzStatus == 1){
          background = "#FFE710";
        }
        if(gzStatus == 2 ){
          background = "#FFE710";
        }
        if(gzStatus == 3 ){
          background = "#FF9821";
        }
        if(gzStatus == 5){
          background = "#F20000";
        }
        if(gzStatus == 4 ||gzStatus == 6 ||gzStatus == 7||gzStatus == 10){
          background = "#F20000";
        }
        return background;
      },
      setDisplayNoData(){
        let self = this;
        self.$http({
          url: "/autoMonitor/gz/queryGzDisplayData",
          method: "post",
        }).then(resp => {
          if (resp.success) {
             self.displayNoData = resp.result.display !=-1?true:false;
          }
        });
      },
      setDisplayHeader(){
        let self = this;
        self.$http({
          url: "/autoMonitor/gz/queryGzHeaderList",
          method: "post",
        }).then(resp => {
          if (resp.success) {
            for(let dis of resp.result){
             self.tableHeaderMap[dis.name] = dis.display;
            }
          }
        });
      },

      stopOrResume(){
         let self = this;
         self.stop = !self.stop;
      },

      autoScroll(){
        let self = this;
        setInterval(function () {
          if(!self.stop){
            return;
          }
          let value = self.getScrollTop() + self.getWindowHeight() - self.getScrollHeight();
          let dis = Math.abs(self.getWindowHeight() - self.getScrollHeight());
          if(dis < 20){
            return;
          }
          if(value >= 0){
            document.documentElement.scrollTop = 0;
          }else {
            document.documentElement.scrollTop ++;
          }
        }, 30);
      },
      getScrollTop(){
        let scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
        if(document.body){
          bodyScrollTop = document.body.scrollTop;
        }
        if(document.documentElement){
          documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
      },

      getScrollHeight(){
        let scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
        if(document.body){
          bodyScrollHeight = document.body.scrollHeight;
        }
        if(document.documentElement){
          documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        return scrollHeight;
      },

      getWindowHeight(){
        let windowHeight = 0;
        if(document.compatMode == "CSS1Compat"){
          windowHeight = document.documentElement.clientHeight;
        }else{
          windowHeight = document.body.clientHeight;
        }
        return windowHeight;
      },

      getKuweiList(noLoad){
        let self = this;
        if(!noLoad){
          self.tableLoading = true;
        }
        self.$http({
          url: "/autoMonitor/position/queryLookBoardDetail",
          method: "post",
          params:{code:self.code}
        }).then(resp => {
          if (resp.success) {
            self.boardDetail = {respMan:"",name:""};
            if(!noLoad){
              self.tableLoading = false;
            }
            self.tableHeader =  [{"columnName": "name", "coloumNameCn": "库位"},
              {"columnName": "gzCode", "coloumNameCn": "工装编号"},
              {"columnName": "carType", "coloumNameCn": "车型"},
              {"columnName": "useStatusCn", "coloumNameCn": "库态"},
              {"columnName": "gzStatusCn", "coloumNameCn": "状态"}];
            self.tableData = resp.result;
            if(self.tableData.length > 0){
              let data = self.tableData[0];
              let name = data.gzName||"";
              self.boardDetail.respMan = data.respMan;
              for(let i = 0;i< name.length;i++){
                self.boardDetail.name = self.boardDetail.name+" "+name[i]
              }
            }
          }
        });
      },
    }
  }
</script>
<style>
  @import '../../../assets/css/swiper.css';
  @import '../../../assets/css/board.css';
  .bg-white{
    color: white;
  }
  .floating-button {
    color: #fff;
    position: fixed;
    left: 16px;
    top: 50%;
    bottom: 88px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1500;
    overflow: hidden;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    background-color: #2196f3;
  }


</style>
